<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式绑定</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
    .basic{
        width: 400px;
        height: 100px;
        border: 1px solid black;
    }
    .happy{
        background-color: skyblue;
    }
    .normal{
        width: 900px;
    }
    .sad{
        border: 3px solid red;
    }
</style>
<body>
<div id="root">
<!--    绑定class样式字符串写法，适用于样式的类名不确定，要动态决定-->
    <div class="basic" :class="mood" @click="changeMood">
        {{name}}
    </div><br><br>
    <!--    绑定class样式数组写法，适用于要绑定的样式个数不确定,名字也不确定-->
    <div class="basic" :class="arr">
        {{name}}
    </div><br><br>
    <!--    绑定class样式对象写法，适用于要绑定的样式个数确定,名字也确定，要动态决定用不用-->
    <div class="basic" :class="index">
        {{name}}
    </div>

</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示
    new Vue({
        el:'#root',
        data:{
          name:'hellow',
            mood:'normal',
            arr:['happy','sad','normal'],
            index:{
              happy:true,
                sad:false
            }
        },
        methods:{
            changeMood(){
                const arr = ['happy','sad','normal']
                this.mood=arr[Math.floor(Math.random()*3)]
            }
        }
    })
</script>
</html>